<template>
	<h1>首页watch监听的home</h1>
	<hr />
	<input type="text" v-model="str" />
	<input type="text" v-model="num" />
	<hr />
	{{ obj }}
	<button @click="btn">按钮</button>
	<input type="text" v-model="str" />
</template>

<script setup>
let router = useRouter();
// 监听路由
watch(
	() => router.currentRoute.value,
	newVal => {
		console.log(newVal);
	},
	{
		// 初始化监听,取得初始值
		immediate: true
	}
);

let str = ref('这是一个数据');
let num = ref(100);
let obj = reactive({
	a: 1,
	b: 2,
	m: {
		c: 3
	}
});

// 1监听一个
// watch(str, (newVal, oldVal) => {
// 	console.log('新值:', newVal, '旧值:', oldVal);
// });

// 2监听多个
// watch(
// 	[str, num],
// 	(newVal, oldVal) => {
// 		console.log('新值:', newVal, '旧值:', oldVal);
// 	},
// 	{
// 		// 初始化监听,取得初始值
// 		immediate: true
// 	}
// );

// 3.监听数组
const btn = () => {
	obj.m.c = 'yyy';
	obj.a = 'xxxx';
};
// 返回全部数据
// watch(
// 	obj,
// 	(newVal, oldVal) => {
// 		console.log('新值:', newVal);
// 	},
// 	{
// 		// 初始化监听,取得初始值
// 		immediate: true
// 	}
// );

// 返回单个数据
watch(
	() => obj.m,
	(newVal, oldVal) => {
		console.log('新值:', newVal, '旧值:', oldVal);
	},
	{
		// 初始化监听,取得初始值
		immediate: true,
		// 监听深层
		deep: true
	}
);
// 监听立即执行:
watchEffect(() => {
	console.log(str.value); //好象跟immediate: true一样
});
</script>

<style></style>
